<template>
  <div>
    <Drawer
      title="基本信息"
      v-model="open"
      @on-close="closeDrawer"
      width="720"
      :mask-closable="false"
      :styles="styles"
      draggable
    >
      <Form :model="userInfo">
        <Row v-if="type==='edit'">
          <FormItem>
            <Col span="4">
              <span style="font-size: 20px">基本信息</span>
            </Col>
            <Col>
              <Avatar icon="ios-person" :src="userInfo.avatar"/>
            </Col>
          </FormItem>
        </Row>
        <Row :gutter="32" v-if="type==='edit'">
          <Col span="12">
            <FormItem label="用户ID">{{userInfo.id}}</FormItem>
          </Col>
          <Col span="12">
            <FormItem label="登录账号">{{userInfo.username}}</FormItem>
          </Col>
        </Row>
        <Row :gutter="32" v-if="type==='add'">
          <Col span="12">
            <FormItem label="登录账号">
              <Input v-model="userInfo.username"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="密码">
              <Input v-model="userInfo.password" type="password" password/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="用户名">
              <Input v-model="userInfo.nickName"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="邮箱">
              <Input v-model="userInfo.email"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="手机号">
              <Input v-model="userInfo.mobile"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="性别">
              <Select v-model="userInfo.sex">
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="所属部门">
              <Select v-model="userInfo.departmentTitle">
                <Option value="jobs">Steven Paul Jobs</Option>
                <Option value="ive">Sir Jonathan Paul Ive</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="用户类型">
              <Select>
                <Option value="1">管理员</Option>
                <Option value="2">普通用户</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="头像">
              <Input v-model="userInfo.avatar"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="角色分配">
              <Select v-model="userInfo.roleIdList" multiple><Option v-for="item in roleList" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="所在地区">
              <Input/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="街道地址">
              <DatePicker type="daterange"
                          style="display: block" placement="bottom-end"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="生日">
              <DatePicker type="daterange"
                          style="display: block" placement="bottom-end"></DatePicker>
            </FormItem>
          </Col>
        </Row>

        <FormItem label="简介" label-position="top">
          <Input type="textarea" v-model="userInfo.description" :rows="4"/>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取消</Button>
        <Button type="primary" @click="saveOrUpdateInfo">{{type==='add'?'添加':'修改'}}</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { saveOrUpdate, selectRoleAllByPage } from '@/api/user-api.js'
import { forEach } from '@/libs/tools'

export default {
  props: {
    openEdit: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    openEdit: {
      handler: function (value) {
        this.open = value
      },
      deep: true
    }
  },
  data () {
    return {
      open: false,
      type: 'add',
      userInfo: {
        id: '127708507519182028',
        createBy: '',
        createTime: '2020-06-28 11:43:04',
        updateBy: '',
        updateTime: null,
        common: '',
        delFlag: 0,
        username: 'super_admin1',
        password: '$2a$10$OAF1Qgzpk.83ZSMRSoOGoushY2Fj29eoBV.R3qbqF0fJVMNTkePL6',
        nickName: '老大',
        mobile: '',
        email: '',
        address: '',
        street: '',
        sex: '',
        passStrength: '',
        avatar: '',
        type: 0,
        status: 0,
        description: '',
        departmentId: '',
        departmentTitle: '',
        roles: [],
        permissions: null,
        roleIdList: []
      },
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      roleList: []
    }
  },
  created () {
    this.listRoleAllByPage()
  },
  methods: {
    closeDrawer () {
      this.$emit('closeDrawer', false)
    },
    openDrawer (type, row) {
      this.type = type
      this.userInfo = row
      this.userInfo.roleIdList = []
      if (row.roles !== undefined) {
        row.roles.forEach(v => {
          this.userInfo.roleIdList.push(v.id)
        })
      }
    },
    /**
       * 查询角色集合
       */
    listRoleAllByPage () {
      this.roleList = []
      let data = {
        'current': 0,
        'size': 10
      }
      selectRoleAllByPage(data).then(res => {
        const data = res
        if (data.code === 0) {
          this.roleList = data.data.records
        }
      })
    },
    /**
       * 修改添加用户
       */
    saveOrUpdateInfo () {
      this.userInfo.roles = []
      this.userInfo.roleIdList.forEach(v => {
        this.userInfo.roles.push({ id: v })
      })
      saveOrUpdate(this.userInfo).then(res => {
        let data = res
        if (data.code === 0) {
          this.$emit('selectUserAllByPage')
          this.$Message.success('操作成功')
          this.$emit('closeDrawer', false)
        } else {
          this.$Message.warning(data.msg)
        }
      }).catch(err => {
        this.$Message.error('添加用户失败')
      })
    }
  }
}
</script>
<style>
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
